<template>
  <basic-container>


      <div class="search-box">
        <div class="row center">
          <div class="label">柜子信息：</div>
          <el-input v-model="query.cabinetKeyword" size="small" clearable placeholder="输入关键字" />
        </div>

        <div class="row center">
          <div class="label">人员信息：</div>
          <el-input v-model="query.userKeyword" size="small" clearable placeholder="输入关键字" />
        </div>

        <div class="btn-menu">
          <el-button icon="el-icon-search" @click="onLoad" type="primary" size="small">搜索</el-button>
          <el-button icon="el-icon-delete" size="small" @click="cleanClick()">清空</el-button>
        </div>
      </div>


      <div class="body-box">

        <div class="no-data" v-if="dataList.length<=0">
          <el-image src="/img/no-data.png"/>
        </div>

        <div v-else class="cabinet" v-for="(cabinet,i) in dataList" :key="i">
          <cabinet-box :cabinet="cabinet" @onload = "onLoad"/>
        </div>

        <div class="pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="query.current"
                         :page-sizes="[4, 8, 12, 16, 20]" :page-size="pageSize" :total="query.total" layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>

  </basic-container>
</template>





<script>


import {sidedPage} from "@/api/prison/cabinetcell";
import CabinetBox from "@/views/prison/cabinet-box";
import TestBox from "./test-box";
export default {
  name: "dashboard",
  components: {TestBox, CabinetBox},
  data() {
    return {
      query: {
        current:1,
        size:4,
        total:0,
        cabinetKeyword:'',
        userKeyword:'',
      },
      dataList: [],
    };
  },

  mounted() {
    this.onLoad()
  },



  methods: {
    onLoad(){
      sidedPage(this.query).then(res=>{

        if (this.query.current===1){
          this.dataList =[];
        }
        let records = res.data.data.records;
        this.query.total =res.data.data.total;
        this.dataList =[...this.dataList,...records]
      })
    },

    cleanClick(){
      this.query.current = 1
      this.query.cabinetKeyword = ''
      this.query.userKeyword = ''
      this.onLoad();
    },


    sizeChangeHandle(val) {
      this.query.size = val
      this.onLoad()
    },

    currentChangeHandle(val) {
      this.query.current = val
      this.onLoad()
    },

  }

};


</script>




<style lang="scss">

.search-box{
  display: flex;
  align-items: center;
  .label{
    width: 150px;
    font-size: 14px;
    color: #606266;
    text-align: right;
  }

  .btn-menu{
    text-align: center;
    .el-button{
      margin-left: 30px;
    }
  }

}

.body-box{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-bottom: 50px;
  min-height: 80vh;
  .cabinet{
    max-width: 100%;
    overflow: scroll;
    white-space: nowrap;
  }
  .no-data{
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

}

.pagination{
  width: 100%;
  text-align: right;
  padding-right: 50px;
}


/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background: white;
}
::-webkit-scrollbar-thumb:hover {
  background: #3C5B8C;
}

</style>

